<template>
  <div
    class="scroll-container"
    ref="scrollContainer"
    @scroll="handleScroll"
    :style="{ height: containerHeight + 'px' }"
  >
    <div class="content" v-html="props.conetnt"></div>
    <div class="scrollbar" ref="scrollbar" :style="{ height: containerHeight + 'px' }">
      <div
        class="scrollbar-thumb"
        :style="{
          width: scrollbarWidth + 'px',
          height: thumbHeight + 'px',
          top: thumbPosition + 'px',
          backgroundColor: scrollbarColor, // 使用传递的颜色
          backgroundImage: `url(${scrollbarImage})`,
        }"
        @mousedown="startDrag"
      ></div>
    </div>
  </div>
</template>

<script setup>
//使用方式
//  <CustomScrollbar
//     :containerHeight="400"
//     :scrollbarWidth="12"
//     scrollbarColor="#ff0000"
//     :scrollbarImage="scrollbarImageUrl"
//   >
//    内容
//   </CustomScrollbar>
import { ref, onMounted, onUnmounted, computed } from 'vue';

const props = defineProps({
  conetnt: {
    type: String,
    default: '',
  },
  scrollbarColor: {
    type: String,
    default: '#888',
  },
  scrollbarImage: {
    type: String,
    default: '',
  },
  scrollbarWidth: {
    type: Number,
    default: 10, // 默认宽度
  },
  containerHeight: {
    type: Number,
    default: 400, // 默认高度，可以根据需要调整或通过props传入
  },
});

const scrollContainer = ref(null);
const scrollbar = ref(null);
const isDragging = ref(false);

const contentHeight = computed(() => scrollContainer.value.scrollHeight);
const scrollbarHeight = computed(() => props.containerHeight);
const thumbHeight = computed(() => (scrollbarHeight.value / contentHeight.value) * scrollbarHeight.value);
const thumbPosition = ref(0);

const handleScroll = () => {
  const scrollTop = scrollContainer.value.scrollTop;
  const maxScrollTop = contentHeight.value - scrollbarHeight.value;
  thumbPosition.value = (scrollTop / maxScrollTop) * (scrollbarHeight.value - thumbHeight.value);
};

const startDrag = (event) => {
  isDragging.value = true;
  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', stopDrag);
  event.preventDefault();
};

const drag = (event) => {
  if (!isDragging.value) return;
  const rect = scrollbar.value.getBoundingClientRect();
  let offsetY = event.clientY - rect.top;
  const maxOffsetY = scrollbarHeight.value - thumbHeight.value;
  offsetY = Math.max(0, Math.min(offsetY, maxOffsetY));
  const scrollTop = (offsetY / maxOffsetY) * (contentHeight.value - scrollbarHeight.value);
  scrollContainer.value.scrollTop = scrollTop;
};

const stopDrag = () => {
  isDragging.value = false;
  document.removeEventListener('mousemove', drag);
  document.removeEventListener('mouseup', stopDrag);
};

onMounted(() => {
  handleScroll();
});
</script>

<style scoped>
.scroll-container {
  position: relative;
  overflow: hidden;
}

.content {
  overflow: scroll;
  height: 100%;
  padding-right: 20px; /* 隐藏默认滚动条 */
}

.scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  background-color: #f1f1f1;
}

.scrollbar-thumb {
  position: absolute;
  width: 100%;
  background-size: cover;
  cursor: pointer;
}
</style>